{% extends "base.html" %}
{% block content %}
<style>
	.section .love p {
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 28px;
    line-height: 28px;
    font-size: 25px;
}
.section .groom {
    display: inline;
}

</style>
<section class="section healthSection">
	<div>
		<p>饮食健康</p>
		<div class="content groom" id="content_list">
			{% for i in data %}
			<div style="padding: 10px 10px; max-height: 110px;">
	      <a href="/health/{{i.id}}/index.html"><img src="/{{i.img}}" style="border-radius: 10px; max-height: 100px;"></a>
		    <div class="groomDiv">
		      <div>
		        <a href="/health/{{i.id}}/index.html" style="font-size: 22px;">{{i.title}}</a>
		      </div>
	        <p>
	          <strong style="font-size: 15px;">{{i.describe}}</strong>
	        </p>
	      </div>
			</div>
			{% endfor %}
		</div>

	</div>
</section>
{% if data.has_next %}
<div id="loading_tip" style="clear:both;text-align:center;"></div>
<p class="loading" id="wrapper" title="点击加载更多"></p>
{% endif %}
<script type="text/javascript">
$(function(){
	  var page = 1
	  var all_count = {{data.paginator.num_pages}}
	  $("#wrapper").click(function(){
	      var oldhtml = $("#loading_tip").html();
	      $("#loading_tip").html("<img src='/static/images/loading-mid.gif' style='margin:0 auto;' /><br>正在加载......");
	      page++;
	      var url =  '/health/?page=' + page;
	      $.get(url, function(data){
//	                console.log(data);
	          $('#content_list').append(data);
	          $("#loading_tip").html(oldhtml);
						if (page >= all_count)
						{
							$("#wrapper").hide();
						}
	          if(data == '')
	          {
	              $("#wrapper").hide();
	          }
	      });
	  });
});
</script>

{% endblock %}